<template>
 <div class="recommend">
    <div class="recommend-wrapper">
    <div class="recommend-top-wrapper">
      <div class="top-img-wrapper">
        <div class="img-circle">
          <imgView
            :url="userImg"
        ></imgView>
        </div>
      </div>
      <div class="top-text-wrapper">
        <h3>{{userName}}推荐</h3>
        <p>{{describe}}</p>
      </div>
    </div>
    <div class="middle-img-wrapper">
      <img :src="goodsImg" style="width: 100%; height: 100%" alt="">
    </div>
    <div class="bottom-text-wrapper">
      <h2>{{title}}</h2>
      <p>{{content}}</p>
      <div class="bottom-wrapper">
        <div class="bottom-link" @click="toGiftShop">
          <span>#不打烊的礼物店#</span>
        </div>
        <div class="bottom-right">
          <span>
            <van-icon name="chat-o" size="20px" />
            58
          </span>
          <span>
            <van-icon name="like-o" size="20px" v-if="showLike" @click="clickLike" />
            <van-icon name="like-o" size="20px" color="red" v-else />
            57
          </span>
        </div>
      </div>
    </div>
  </div>
 </div>
</template>

<script>
import imgView from '../base/imgView'
export default {
  props: {
    userImg: {
      type: String,
      default: ''
    },
    userName: {
      type: String,
      default: ''
    },
    describe: {
      type: String,
      default: ''
    },
    goodsImg: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showLike: true
    }
  },
  components: {
    imgView
  },
  methods: {
    clickLike () {
      console.log('click')
      this.showLike = false
    },
    toGiftShop () {
      this.$router.push('/pages/giftShop/main')
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend {
    height: 480px;
    margin: 0 auto;
    background-color: #fafafa;
    margin-bottom: 20px;
    border-radius: 4px;
    .recommend-wrapper {
        height: 460px;
        background-color: #fff;
        .recommend-top-wrapper {
            height: 60px;
            // background-color: pink;
            display: flex;
            .top-img-wrapper {
                flex: 1;
                .img-circle {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    overflow: hidden;
                }
            }
            .top-text-wrapper {
                flex: 4;
                h3 {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 40px;
                }
                p {
                    color: #ccc;
                    line-height: 10px;
                    font-size: 16px;
                }
            }
        }
        .middle-img-wrapper {
            width: 98%;
            height: 210px;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px auto;
        }
        .bottom-text-wrapper {
            margin: 7px;
            h2 {
                font-weight: 700;
            }
            p {
                margin-top: 10px;
                font-size: 16px;
                line-height: 24px;
                color: #ccc;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                letter-spacing: 4px;
            }
            .bottom-wrapper {
                margin-top: 20px;
                display: flex;
                .bottom-link {
                    display: inline-block;
                    flex: 2;
                    font-size: 16px;
                    span {
                        font-weight: 700;
                        color: #515151;
                    }
                }
                .bottom-right {
                    flex: 1;
                    span {
                        font-size: 16px;
                        color: #ccc;
                    }
                }
            }
        }
    }
}
</style>
